<script setup>
    import * as echarts from "echarts"
    import { onMounted, onUnmounted } from 'vue'

    const props = defineProps({
        type: {
            type: Array,
            default: []
        },
        data: {
            type: Array,
            default: []
        }
    })

    let type = props.type
    let dataValue = props.data

    let resData = $ref([])
    let total = $ref(0)

    let num = [100, 30, 10, 20]

    type.forEach((item, index) => {
        total += Number(dataValue[index])
        resData.push({
            name: type[index],
            value: num[index],
            count: dataValue[index]
        })
    })

    let eCharts = null
    let partyMemberPie = $ref(null) 

    onMounted(() => {
        init()
    })

    let colors =  ['#2BF0FB', '#00B366', '#EFAE00', '#FB4E81']

    const init = () => {
        let option = {
            color: colors,
            tooltip: {
                trigger: 'item',
                formatter:function({data}){
                    return data.name + '  '+ data.count
                },
                backgroundColor: "#0157DA",
                borderWidth: 0,
                textStyle: {
                    color: "#fff"
                },
            },
            title: [
                {
                    text: '总人数',
                    x: 'center',
                    top: '55%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 18,
                        foontWeight: '600',
                    },
                },
                {
                    text: total,
                    x: 'center',
                    top: '38%',
                    textStyle: {
                        fontSize: 28,
                        color: '#02D9F2',
                        foontWeight: '600',
                    },
                },
            ],
            // legend: {
            //     bottom: 30,
            //     itemWidth: 12,
            //     itemHeight: 12,
            //     textStyle: {
            //         backgroundColor: 'transparent',
            //         color: '#fff',
            //         width: 50
            //     }
            // },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['60%', '80%'],
                    center: ['50%', '50%'],
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false,
                        length: 2,
                        length2: 10,
                        maxSurfaceAngle: 80
                    },
                    data: resData
                }
            ]
        }

        eCharts = echarts.init(partyMemberPie)
        eCharts.setOption(option)
    }



</script>

<template>
    <div class="party-age-warp card-box">
        <div class="card-title">
            <img src="../../../assets/images/card-title-icon-ziyuan.png">
            党员资源
        </div>

        <div class="flex">
            <div class="echarts-bar" ref="partyMemberPie"></div>
            
            <div class="classic-list">
                <div class="classic-item" v-for="(item, i) in resData" :key="i">
                    <div class="color" :style="{ backgroundColor: colors[i] }"></div>
                    <div class="infos">
                        <div class="num">{{((item.count / total) * 100).toFixed(2)}}%</div>
                        <div class="des">{{item.name}} ({{ item.count }})</div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<style lang="less" scoped>
    .party-age-warp{
        height: 255px;

        .echarts-bar{
            width: 50%;
            height: 215px;
        }

        .classic-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 15px;
            .classic-item {
                flex: 0 0 49%;
                display: flex;
                margin: 14px 0;
                height: 49px;
                .color {
                    margin-right: 10px;
                    width: 7px;
                    height: 49px;
                }
                .infos {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    color: #fff;
                    .num {
                        font-size: 24px;
                        color: #06F2FC;
                    }
                }
            }
        }
    }
</style>